<template>
  <div class="beam-layout-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- 所属桥梁 -->
          <bjSelect
            :allowClear="true"
            :loading="bridgeNameLoading"
            placeholder="请选择所属桥梁"
            :replaceFields="bridgeNameReplaceFields"
            :dataResource="bridgeNameSource"
            v-model="bridgeName"
            @change="conditionChange($event, 'bridgeName')"
          >
          </bjSelect>
          <!-- 幅别 -->
          <bjSelect
            :allowClear="true"
            placeholder="请选择幅别"
            :dataResource="amClassSource"
            v-model="amClass"
            @change="conditionChange($event, 'amClass')"
          >
          </bjSelect>
          <!-- 梁类型 -->
          <bjSelect
            :allowClear="true"
            :loading="beamTypeLoading"
            placeholder="请选择梁类型"
            :replaceFields="beamTypeReplaceFields"
            :dataResource="beamTypeSource"
            v-model="beamType"
            @change="conditionChange($event, 'beamType')"
          >
          </bjSelect>
          <!-- 梁号 -->
          <a-input
            placeholder="请输入梁号"
            v-model="componentParts"
            allowClear
          />
          <!-- 时间 -->
          <bjRangeCalendar
            :format="dateFormat"
            v-model="dateRange"
            :show-time="{ format: dateFormat }"
            @ok="calendarOk"
            @change="calendarChange"
          ></bjRangeCalendar>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getData()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container" v-loading="loading">
      <div class="table-header" header="要料申请"></div>
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div v-if="item.key == 'unionSpan'">
                {{ row.unite || "--" }}联 {{ row.span || "--" }}跨
              </div>
              <div v-else>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-colgroup title="设计配合比（kg/m³）">
            <vxe-column field="cement" title="水泥" width="80"></vxe-column>
            <vxe-column
              field="naturalSand"
              title="细骨料"
              width="80"
            ></vxe-column>
            <vxe-column field="flyAsh" title="粉煤灰" width="80"></vxe-column>
            <vxe-column field="water" title="水" width="80"></vxe-column>
            <vxe-column
              field="zhongshizi"
              title="粗骨料(5-10)mm"
              width="160"
            ></vxe-column>
            <vxe-column
              field="dashizi"
              title="粗骨料(10-20)mm"
              width="160"
            ></vxe-column>
            <vxe-column
              field="waterReducingAgent"
              title="外加剂"
              width="80"
            ></vxe-column>
          </vxe-colgroup>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </div>
</template>

<script>
import bjSelect from "@/components/bj-select";
import bjRangeCalendar from "@/components/bj-range-calendar";
import { getDickeyList } from "@/api/common";
import { getBridgeList } from "@/api/wisdom-beam/beamInfoConfig";
import { getYlsqList } from "@/api/wisdom-beam/collect-app";
export default {
  components: {
    bjSelect,
    bjRangeCalendar,
  },
  data() {
    return {
      row: {},
      importLoading: false,
      exportLoading: false,
      downloadLoading: false,
      operatePageVisible: false,
      operateType: 1,
      //梁号
      componentParts: "",
      //所属桥梁
      bridgeName: undefined,
      bridgeNameSource: [],
      bridgeNameLoading: false,
      bridgeNameReplaceFields: { key: "key", label: "value" },
      //所属幅别
      amClass: undefined,
      amClassSource: [
        {
          key: "左幅",
          value: "左幅",
        },
        {
          key: "右幅",
          value: "右幅",
        },
      ],
      //所属梁类型
      beamTypeLoading: false,
      beamType: undefined,
      beamTypeSource: [],
      beamTypeReplaceFields: { key: "dicValue", label: "dicDesc" },
      //时间
      dateFormat: "YYYY-MM-DD HH:mm:ss",
      dateRange: [],
      columns: [
        {
          title: "梁号",
          key: "componentParts",
          width: 200,
        },
        {
          title: "所属桥梁",
          key: "bridgeName",
          width: 100,
        },
        {
          title: "幅别",
          key: "amClass",
          width: 60,
        },
        {
          title: "强度等级",
          key: "strengthGradeDesc",
          width: 80,
        },
        {
          title: "梁类型",
          key: "beamTypeDesc",
          width: 80,
        },
        {
          title: "设计方量（m³）",
          key: "designVolume",
          width: 130,
        },
        {
          title: "坍落度（mm）",
          key: "slump",
          width: 130,
        },
        {
          title: "申请时间",
          key: "startTime",
          width: 150,
        },
      ],

      tableData: [],
      loading: false,
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.getBridgeList();
    this.getBeamType();
    this.getData();
  },
  methods: {
    //查询桥梁列表
    getBridgeList() {
      this.bridgeNameLoading = true;
      return new Promise((resolve, reject) => {
        getBridgeList({})
          .then((res) => {
            let { data } = res;
            let list = data?.result || [];
            this.bridgeNameSource = list.map((v) => {
              return { key: v, value: v };
            });
            resolve();
          })
          .catch((_) => {
            this.bridgeNameSource = [];
            reject();
          })
          .finally((_) => {
            this.bridgeNameLoading = false;
          });
      });
    },

    //查询梁类型
    getBeamType() {
      this.beamTypeLoading = true;
      return new Promise((resolve, reject) => {
        getDickeyList({ dictKey: "TASK_MANAGER_TYPE" })
          .then((res) => {
            let { data } = res;
            this.beamTypeSource = data?.result ?? [];
            resolve();
          })
          .catch((_) => {
            this.beamTypeSource = [];
            reject();
          })
          .finally((_) => {
            this.beamTypeLoading = false;
          });
      });
    },

    //查询列表
    getData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.pager;
        let { componentParts, bridgeName, amClass, beamType, dateRange } = this;
        getYlsqList({
          page,
          pageSize,
          componentParts: componentParts || "",
          bridgeName: bridgeName?.key || "",
          amClass: amClass?.key || "",
          beamType: beamType?.key,
          startTime: dateRange[0] || "",
          endTime: dateRange[1] || "",
        })
          .then((res) => {
            let { data } = res;
            this.tableData = data?.result?.rows ?? [];
            this.pager.total = data?.result?.total ?? 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听筛选条件切换
    conditionChange(ev, keyName) {
      this[keyName] = ev;
      this.getData();
    },

    //监听日期选择
    calendarOk(dates = []) {
      this.dateRange = dates;
      this.getData();
    },

    calendarChange(dates = []) {
      this.dateRange = dates;
      if (this.dateRange.length == 0) {
        this.getData();
      }
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.table-header {
  padding: 28px 20px;
}
</style>
